import Phaser from 'phaser';

import UtilsLoader from '../../../utils/Utils.loader/UtilsLoader';
import UtilsCreateFrameAnima from '../../../utils/Utils.createFrameAnima/UtilsCreateFrameAnima';
import UtilsBar from '../../../utils/Utils.Bar/UtilsBar';
import UtilsCreateRocker from '../../../utils/Utils.createRocker/UtilsCreateRocker';
import UtilsCoordinateConter from '../../../utils/Utils.coordinate.conter/UtilsCoordinateConter';
import { UtilsBindRockerSwitchFrameAnima, SwitchFrameAttackAnima } from '../../../utils/Utils.BindRockerSwitchFrameAnima/UtilsBindRockerSwitchFrameAnima';
import UtilsVisualTracking from '../../../utils/Utils.VisualTracking/UtilsVisualTracking';
import UtilsCameraFollowingTarget from '../../../utils/Utils.CameraFollowingTarget/UtilsCameraFollowingTarget';
import { UtilsGetScene } from '../../../utils/Utils.GetScene/UtilsGetScene';
import SaveSceneExampleQueue from '../../../utils/Utils.SaveSceneExampleQueue/UtilsSaveSceneExampleQueue';
import { UtilsGroup } from '../../../utils/Utils.Group/UtilsGroup';
import UtilsDetection from '../../../utils/Utils.Detection/UtilsDetection';
import { KnapsackShell, LightsShell, LightBodyShell } from '../../../utils/Utils.SingletonShell/UtilsSingletonShell';
import { Graphical, Line } from '../../../utils/Utils.Graphical/UtilsGraphical';
import UtilsSprite from '../../../utils/Utils.Sprite/UtilsSprite';
import UtilsPathFollow from '../../../utils/Utils.PathFollow/UtilsPathFollow';
import UtilsBindingTarget from '../../../utils/Utils.BindingTarget/UtilsBindingTarget';
import UtilsItemDrops from '../../../utils/Utils.ItemDrops/UtilsItemDrops';
import { LightBodyRemove } from '../../../utils/Utils.Lights/UtilsLights';

export default class SceneWorld extends Phaser.Scene {
    constructor() {
        super({
            key: 'SceneWorld'
        });

        this.Vj = null;
        this.direction = null;
        this.demonCursors = null;
        this.demonPlay1 = null;
        this.humanNpc = null;
        this.fireAttackOver = null;
        this.AttackFir = null;
        this.spine = null;
        this.demoLastUp = 2;
        this.humanNpcTrackDemonPlay1 = false;
        this.humanRange = null;
        this.inputDom = null;
        this.drawLine = null;
        this.creatLine = null;
        this.followXY = null;
        this.msgDom = null;
        this.fireAttackEnd = null;
        this.bookRangeLeft = null;
        this.bookRangeRight = null;
        this.npcBloodBar = null;

        this.WWC = UtilsCoordinateConter.coordinatrConter('world').WWC;
        this.WHC = UtilsCoordinateConter.coordinatrConter('world').WHC;
        this.WFW = UtilsCoordinateConter.coordinatrConter('worldFull').WFW;
        this.WFH = UtilsCoordinateConter.coordinatrConter('worldFull').WFH;
        this.VWC = UtilsCoordinateConter.coordinatrConter('view').VWC;
        this.VHC = UtilsCoordinateConter.coordinatrConter('view').VHC;
        this.VFW = UtilsCoordinateConter.coordinatrConter('viewFull').VFW;
        this.VFH = UtilsCoordinateConter.coordinatrConter('viewFull').VFH;
    }

    init() {
        console.log('SceneWorld init!');

        console.log('摄像机视野中心点坐标:' + UtilsCoordinateConter.coordinatrConter('view'));
        console.log('游戏底层世界视野中心点坐标:' + UtilsCoordinateConter.coordinatrConter('world'));
        console.log('摄像机全视野坐标:' + UtilsCoordinateConter.coordinatrConter('viewFull'));
        console.log('游戏底层世界全视野坐标:' + UtilsCoordinateConter.coordinatrConter('worldFull'));

        SaveSceneExampleQueue.enQueue({
            'SceneWorld': this
        });

        window.speak((e) => {
            console.log('监听DOM', e);
            this.msgDom.setVisible(true);
            let timeOut = setTimeout(() => {
                this.msgDom.setVisible(false);
                clearTimeout(timeOut);
            }, 2000);
        });
    }

    preload() {
        console.log('SceneWorld pre!');

        new UtilsCreateRocker({}, this);

        this.IMAGE_LOAD();

        this.DEMON_HUMAN_MOVE_LOAD();
        
        // new UtilsLoader('spine', [{
        //     key: 'spine',
        //     jsonPath: 'spine.json',
        //     atlasPath: ['spine.atlas'],
        //     anima: true
        // }], 'http://localhost:3001', this, (e) => {
        //     console.log(e);
        // });

    }

    create() {
        console.log('SceneWorld create!');

        new UtilsGetScene({
            sceneKey: [
                'SceneUiSkill',
                'SceneUiKnap',
                'SceneUiDom',
                'SceneUiHead',
                'SceneUiTask',
                'SceneUiBar',
                'SceneUiEnchant'
            ],
            onEventKey: [
                'onKnapsack',
                'onCloseKnapsack',
                'onAtt',
                'onHeadClick',
                'onTask',
                'onCloseTextFrame',
                'onRet',
                'onSunClick',
                'onDuskClick',
                'onNightClick',
                'onEnchant',
                'onEnchantBtn'
            ]
        }, (e) => {
            if (e === '打开背包!') {
                KnapsackShell.init();
            }
            if (e === '关闭背包!') {
                SaveSceneExampleQueue.getQueue().forEach(element => {
                    if (element.SceneUiKnap) {
                        element.SceneUiKnap.onRemoveEquip();
                        element.SceneUiKnap.knapsack.setVisible(false);
                        element.SceneUiKnap.knapClose.setVisible(false);
                    }
                });
            }
            if (e === '普通攻击!') {
                SaveSceneExampleQueue.getQueue().forEach(element => {
                    if (element.SceneUiSkill) {
                        element.SceneUiSkill.att.setVisible(false);
                        element.SceneUiSkill.attCD.setVisible(true);
                    }
                });
                new SwitchFrameAttackAnima('direction', 'demonPlay1', this);
                this.NORMAL_ATTACK_WORKfLOW();
            }
            if (e === '点击playerHead!') {
                console.log('playerHead');
            }
            if (e === '对话!') {
                SaveSceneExampleQueue.getQueue().forEach(element => {
                    if (element.SceneUiTask) {
                        element.SceneUiTask.textFrame.setVisible(true);
                    }
                });
                SaveSceneExampleQueue.getQueue().forEach(element => {
                    if (element.SceneUiDom) {
                        element.SceneUiDom.textFrameDom.setVisible(true);
                        element.SceneUiDom.openTextFrameDom();
                    }
                });
            }
            if (e === '关闭任务!') {
                SaveSceneExampleQueue.getQueue().forEach(element => {
                    if (element.SceneUiTask) {
                        element.SceneUiTask.textFrame.setVisible(false);
                    }
                });
                SaveSceneExampleQueue.getQueue().forEach(element => {
                    if (element.SceneUiDom) {
                        element.SceneUiDom.textFrameDom.setVisible(false);
                    }
                });
            }
            if (e === '回城!') {
                SaveSceneExampleQueue.getQueue().forEach(element => {
                    if (element.SceneUiSkill) {
                        element.SceneUiSkill.ret.setVisible(false);
                        element.SceneUiSkill.retCD.setVisible(true);
                    }
                    if (element.SceneUiBar) {
                        element.SceneUiBar.showHomeBar((e) => {
                            SaveSceneExampleQueue.getQueue().forEach(element => {
                                if (element.SceneUiSkill) {
                                    element.SceneUiSkill.ret.setVisible(true);
                                    element.SceneUiSkill.retCD.setVisible(false);
                                    this.demonPlay1.x = this.WWC + 360;
                                    this.demonPlay1.y = this.WHC + 220;
                                }
                            });
                        });
                    }
                });
            }
            if (e === '点击太阳!') {
                delete LightsShell.instance;
                delete LightBodyShell.instance;
                LightBodyRemove.init([{
                    key: 'fireLightBody1',
                    spriteKey: 'fire1'
                },{
                    key: 'fireLightBody2',
                    spriteKey: 'fire2'
                },{
                    key: 'fireLightBody3',
                    spriteKey: 'fire3'
                },{
                    key: 'fireLightBody4',
                    spriteKey: 'fire4'
                }], this);
                LightsShell.init({
                    sky: '0xffffff'
                }, this);

            }
            if( e === '点击黄昏!') {
                delete LightsShell.instance;
                delete LightBodyShell.instance;
                LightBodyRemove.init([{
                    key: 'fireLightBody1',
                    spriteKey: 'fire1'
                },{
                    key: 'fireLightBody2',
                    spriteKey: 'fire2'
                },{
                    key: 'fireLightBody3',
                    spriteKey: 'fire3'
                },{
                    key: 'fireLightBody4',
                    spriteKey: 'fire4'
                }], this);
                LightsShell.init({
                    sky: '0xebc79e',
                }, this);
            }
            if (e === '点击夜晚!') {
                delete LightsShell.instance;
                LightsShell.init({
                    sky: '0x555555'
                }, this);
                LightBodyShell.init([{
                    key: 'fireLightBody1',
                    sprite: {
                        kes: 'fire1',
                        playKey: 'fireAnima',
                        spriteKey: 'fire',
                    },
                    x: this.WWC + 260,
                    y: this.WWC + 260,
                    r: 130,
                    col:'0xFF8888'
                },{
                    key: 'fireLightBody2',
                    sprite: {
                        kes: 'fire2',
                        playKey: 'fireAnima',
                        spriteKey: 'fire',
                    },
                    x: this.WWC - 300,
                    y: this.WWC - 260,
                    r: 130,
                    col:'0xFF8888'
                },{
                    key: 'fireLightBody3',
                    sprite: {
                        kes: 'fire3',
                        playKey: 'fireAnima',
                        spriteKey: 'fire',
                    },
                    x: this.WWC - 200,
                    y: this.WWC + 260,
                    r: 130,
                    col:'0xFF8888'
                },{
                    key: 'fireLightBody4',
                    sprite: {
                        kes: 'fire4',
                        playKey: 'fireAnima',
                        spriteKey: 'fire',
                    },
                    x: this.WWC + 200,
                    y: this.WWC - 160,
                    r: 130,
                    col:'0xFF8888'
                }], this);
            }
            if (e === '附魔!') {
                SaveSceneExampleQueue.getQueue().forEach(element => {
                    if (element.SceneUiEnchant) {
                        element.SceneUiEnchant.enchant.setVisible(true);
                        element.SceneUiEnchant.enchantWeapon.setVisible(true);
                        element.SceneUiEnchant.enchantBtn.setVisible(true);
                        element.SceneUiEnchant.enchantParticle1.setVisible(true);
                        element.SceneUiEnchant.enchantParticle2.setVisible(true);
                    }
                });
            }
            if (e === '开始附魔!') {
                SaveSceneExampleQueue.getQueue().forEach(element => {
                    if (element.SceneUiEnchant) {
                        element.SceneUiEnchant.enchantBtn.setVisible(false);
                        element.SceneUiEnchant.ENCHANT_WORKfLOW();
                    }
                });
            }
            if (e === '关闭附魔!') {
                SaveSceneExampleQueue.getQueue().forEach(element => {
                    if (element.SceneUiEnchant) {
                        element.SceneUiEnchant.RESETTING_WORKfLOW();
                    }
                });
            }
        }, this);

        this.add.tileSprite(this.WWC, this.WWH, this.WFW, this.WFH, 'map')
        .setPipeline('Light2D');
        
        // this.spine = this.add.spine(510, 400, 'spine', 'animation', true);

        this.DEMON_HUMAN_MOVE_CREATED_FRAME_ANIMA();

        /**
         * @summary 生成精灵
         */
        new UtilsSprite([{
            key: 'demonPlay1',
            spriteKey: 'demonMoveBottomPlay1',
            sprXY: {
                x: this.WWC + 360,
                y: this.WHC + 220
            },
            ag: false,
            gy: -1,
            boun: -1,
            cwb: true,
            off: {
                x: 100,
                y: 120
            },
            setPipe: true
        },{
            key: 'humanNpc',
            spriteKey: 'humanBottom',
            sprXY: {
                x:  this.WWC + 280,
                y:  this.WHC - 120
            },
            ag: false,
            gy: -1,
            boun: -1,
            cwb: true,
            setData: {
                blood: 1,
                attack: .1
            },
            setPipe: true
        }], '', this);

        new UtilsSprite([{
            key: 'home1',
            spriteKey: 'home',
            play: 'homeAnima',
            sprXY: {
                x: this.WWC + 320,
                y: this.WHC + 260
            },
            scal: 1.2,
            setPipe: true
        },{
            key: 'book1',
            spriteKey: 'book',
            sprXY: {
                x:  this.WWC - 240,
                y:  this.WHC - 80
            },
            setPipe: true
        }], 'static', this);

        new UtilsSprite([{
            key: 'gold1',
            spriteKey: 'gold',
            play: 'goldAnima',
            sprXY: {
                x: 0,
                y: 0
            },
            ag: false,
            gy: -1,
            boun: -1,
            cwb: true,
            vis: true,
            setPipe: true
        }], '', this);

        /**
         * @summary 生成精灵组
         */
        new UtilsGroup('static', 'houseGroup', [
            {
                x: this.WWC - 200,
                y: this.WHC - 260,
                key: 'houseTopWorld',
                data: {
                    key: 'houseTopWorld',
                    data: {
                        id:'02afa24',name:'houseTop'
                    }
                },
                off: {
                    x: -100,
                    y: -100
                },
                setPipe: true
            },
            {
                x: this.WWC + 340,
                y: this.WHC - 380,
                key: 'houseRightWorld',
                data: {
                    key: 'houseRightWorld',
                    data: {
                        id:'2asf212',name:'houseRight'
                    }
                },
                off: {
                    x: -100,
                    y: -100
                },
                setPipe: true
            },
            {
                x: this.WWC + 60,
                y: this.WHC + 280,
                key: 'houseBottomWorld',
                data: {
                    key: 'houseBottomWorld',
                    data: {
                        id:'825asf0',name:'houseBottom'
                    }
                },
                off: {
                    x: -100,
                    y: -100
                },
                setPipe: true
            },
            {
                x: this.WWC - 260,
                y: this.WHC + 100,
                key: 'houseLeftWorld',
                data: {
                    key: 'houseLeftWorld',
                    data: {
                        id:'1adf0as',name:'houseLeft'
                    }
                },
                off: {
                    x: -100,
                    y: -100
                },
                setPipe: true
            }
        ], this);

        new UtilsCameraFollowingTarget({
            targetKey: 'demonPlay1',
            zoom: 1,
            len: {
                x: .1,
                y: .1
            },
            off: {
                x: -290,
                y: -100
            },
            worldBounds: {
                x: 0,
                y: 0
            },
            removeBlackEdge: {
                w: this.VFW,
                h: this.VFH
            }
        }, this);

        this.Vj = new UtilsCreateRocker({
            type: 'first',
            bottomImage: 'rockerBottom',
            middle: 'rockerMiddle',
            top: 'rockerTop'
        }, this);

        new UtilsCreateRocker({
            type: 'last',
            bindKey: 'input',
            sceneKey: 'Vj'
        }, this);

        /**
         * @summary 监听 Player -> House Group
         */
        new UtilsDetection({
            type: '_collider',
            key: 'demonPlay1',
            targetKey: 'houseGroup'
        }, e => {
            // console.log(e);
        }, this);

        this.HUMAN_DRAW_RANGE();

        this.BOOK_DRAW_RANGE();

        /**
         * @summary 监听 NPC -> Player
         */
        new UtilsDetection({
            type: '_overlap',
            key: 'demonPlay1',
            targetKey: 'humanNpc'
        }, e => {
            // console.log(e);
            SaveSceneExampleQueue.getQueue().forEach(element => {
                if (element.SceneUiDom) {
                    element.SceneUiDom.warnLeft.setVisible(true);
                    element.SceneUiDom.warnRight.setVisible(true);
                    element.SceneUiDom.warnTop.setVisible(true);
                }
            });
            if (timeOut) return clearTimeout(timeOut);
            let timeOut = setTimeout(() => {
                SaveSceneExampleQueue.getQueue().forEach(element => {
                    if (element.SceneUiDom) {
                        element.SceneUiDom.warnLeft.setVisible(false);
                        element.SceneUiDom.warnRight.setVisible(false);
                        element.SceneUiDom.warnTop.setVisible(false);
                    }
                });
                clearTimeout(timeOut);
            });
        }, this);

        /**
         * @summary 监听安全区
         */
        new UtilsDetection({
            type: '_overlap',
            key: 'demonPlay1',
            targetKey: 'home1'
        }, (e) => {
            SaveSceneExampleQueue.getQueue().forEach(element => {
                if (element.SceneUiSkill) {
                    if (element.SceneUiSkill.task) {
                        element.SceneUiSkill.task.setVisible(false);
                    }
                }
            });
            this.humanNpcTrackDemonPlay1 = false;
        }, this);

        /**
         * @summary human Blood Bar
         */
        new UtilsBar('bloodBar', {
            npcBarKey: 'npcBloodBar',
            x: 0,
            y: 0,
            w: 50,
            h: 10,
            color: 0xff0000,
            radius: 3,
            bloodProgr: 1,
            showText: '剩余血量',
            text: {
                x: 0.5,
                y: 1.5
            },
            bindTar: {
                tarKey: 'humanNpc',
                off: {
                    x: -22,
                    y: -30
                },
                rot: false,
                rotFF: false
            }
        }, this, (e) => {
            callback(e);
        });

        this.SPEAK_DOM();
        
        /**
         * @summary 默认白天
         */
        LightsShell.init({
            sky: '0xffffff'
        }, this);
        
    }

    update() {
        this.demonCursors = this.Vj.getCursors();
        new UtilsCreateRocker({
            type: 'control',
            bindKey: 'demonPlay1',
            cursors: this.demonCursors,
            speed: 3
        }, this);
        new UtilsBindRockerSwitchFrameAnima({
            type: 'eightDirections',
            spriteKey: 'demonPlay1',
            RockerDirection: {
                type: 'countEightDirection',
                lastUp: 'demoLastUp',
                deltaY: this.demonCursors.deltaY,
                deltaX: this.demonCursors.deltaX
            }
        }, this);

        if (this.humanNpcTrackDemonPlay1) {
            new UtilsVisualTracking({
                type: 'monomer',
                npc: this.humanNpc,
                target: this.demonPlay1,
                speed: .2,
                anima: 'four',
                spriteKey: 'humanNpc'
            }, this);
        }

    }

    DEMON_HUMAN_MOVE_LOAD() {
        new UtilsLoader('atlas', [{
            key: 'demonMoveBottom',
            imagePath: ['/images/phaser/demon/demonMoveBottom/demonMoveBottom.png', '/images/phaser/demon/demonMoveBottom/demonMoveBottom_normal.png'],
            jsonPath: '/images/phaser/demon/demonMoveBottom/demonMoveBottom.json'
        },{
            key: 'demonMoveBottomLeft',
            imagePath: ['/images/phaser/demon/demonMoveBottomLeft/demonMoveBottomLeft.png', '/images/phaser/demon/demonMoveBottomLeft/demonMoveBottomLeft_normal.png'],
            jsonPath: '/images/phaser/demon/demonMoveBottomLeft/demonMoveBottomLeft.json'
        },{
            key: 'demonMoveLeft',
            imagePath: ['/images/phaser/demon/demonMoveLeft/demonMoveLeft.png', '/images/phaser/demon/demonMoveLeft/demonMoveLeft_normal.png'],
            jsonPath: '/images/phaser/demon/demonMoveLeft/demonMoveLeft.json'
        },{
            key: 'demonMoveTopLeft',
            imagePath: ['/images/phaser/demon/demonMoveTopLeft/demonMoveTopLeft.png', '/images/phaser/demon/demonMoveTopLeft/demonMoveTopLeft_normal.png'],
            jsonPath: '/images/phaser/demon/demonMoveTopLeft/demonMoveTopLeft.json'
        },{
            key: 'demonMoveTop',
            imagePath: ['/images/phaser/demon/demonMoveTop/demonMoveTop.png', '/images/phaser/demon/demonMoveTop/demonMoveTop_normal.png'],
            jsonPath: '/images/phaser/demon/demonMoveTop/demonMoveTop.json'
        },{
            key: 'demonMoveTopRight',
            imagePath: ['/images/phaser/demon/demonMoveTopRight/demonMoveTopRight.png', '/images/phaser/demon/demonMoveTopRight/demonMoveTopRight_normal.png'],
            jsonPath: '/images/phaser/demon/demonMoveTopRight/demonMoveTopRight.json'
        },{
            key: 'demonMoveRight',
            imagePath: ['/images/phaser/demon/demonMoveRight/demonMoveRight.png', '/images/phaser/demon/demonMoveRight/demonMoveRight_normal.png'],
            jsonPath: '/images/phaser/demon/demonMoveRight/demonMoveRight.json'
        },{
            key: 'demonMoveBottomRight',
            imagePath: ['/images/phaser/demon/demonMoveBottomRight/demonMoveBottomRight.png', '/images/phaser/demon/demonMoveBottomRight/demonMoveBottomRight_normal.png'],
            jsonPath: '/images/phaser/demon/demonMoveBottomRight/demonMoveBottomRight.json'
        },{
            key: 'demonAttackBottom',
            imagePath: ['/images/phaser/demon/demonAttackBottom/demonAttackBottom.png', '/images/phaser/demon/demonAttackBottom/demonAttackBottom_normal.png'],
            jsonPath: '/images/phaser/demon/demonAttackBottom/demonAttackBottom.json'
        },{
            key: 'demonAttackBottomLeft',
            imagePath: ['/images/phaser/demon/demonAttackBottomLeft/demonAttackBottomLeft.png', '/images/phaser/demon/demonAttackBottomLeft/demonAttackBottomLeft_normal.png'],
            jsonPath: '/images/phaser/demon/demonAttackBottomLeft/demonAttackBottomLeft.json'
        },{
            key: 'demonAttackBottomRight',
            imagePath: ['/images/phaser/demon/demonAttackBottomRight/demonAttackBottomRight.png', '/images/phaser/demon/demonAttackBottomRight/demonAttackBottomRight_normal.png'],
            jsonPath: '/images/phaser/demon/demonAttackBottomRight/demonAttackBottomRight.json'
        },{
            key: 'demonAttackLeft',
            imagePath: ['/images/phaser/demon/demonAttackLeft/demonAttackLeft.png', '/images/phaser/demon/demonAttackLeft/demonAttackLeft_normal.png'],
            jsonPath: '/images/phaser/demon/demonAttackLeft/demonAttackLeft.json'
        },{
            key: 'demonAttackRight',
            imagePath: ['/images/phaser/demon/demonAttackRight/demonAttackRight.png', '/images/phaser/demon/demonAttackRight/demonAttackRight_normal.png'],
            jsonPath: '/images/phaser/demon/demonAttackRight/demonAttackRight.json'
        },{
            key: 'demonAttackTop',
            imagePath: ['/images/phaser/demon/demonAttackTop/demonAttackTop.png', '/images/phaser/demon/demonAttackTop/demonAttackTop_normal.png'],
            jsonPath: '/images/phaser/demon/demonAttackTop/demonAttackTop.json'
        },{
            key: 'demonAttackTopLeft',
            imagePath: ['/images/phaser/demon/demonAttackTopLeft/demonAttackTopLeft.png', '/images/phaser/demon/demonAttackTopLeft/demonAttackTopLeft_normal.png'],
            jsonPath: '/images/phaser/demon/demonAttackTopLeft/demonAttackTopLeft.json'
        },{
            key: 'demonAttackTopRight',
            imagePath: ['/images/phaser/demon/demonAttackTopRight/demonAttackTopRight.png', '/images/phaser/demon/demonAttackTopRight/demonAttackTopRight_normal.png'],
            jsonPath: '/images/phaser/demon/demonAttackTopRight/demonAttackTopRight.json'
        },{
            key: 'humanTop',
            imagePath: ['/images/phaser/monster/humanTop/humanTop.png', '/images/phaser/monster/humanTop/humanTop_normal.png'],
            jsonPath: '/images/phaser/monster/humanTop/humanTop.json'
        }, {
            key: 'humanRight',
            imagePath: ['/images/phaser/monster/humanRight/humanRight.png', '/images/phaser/monster/humanRight/humanRight_normal.png'],
            jsonPath: '/images/phaser/monster/humanRight/humanRight.json'
        }, {
            key: 'humanBottom',
            imagePath: ['/images/phaser/monster/humanBottom/humanBottom.png', '/images/phaser/monster/humanBottom/humanBottom_normal.png'],
            jsonPath: '/images/phaser/monster/humanBottom/humanBottom.json'
        }, {
            key: 'humanLeft',
            imagePath: ['/images/phaser/monster/humanLeft/humanLeft.png', '/images/phaser/monster/humanLeft/humanLeft_normal.png'],
            jsonPath: '/images/phaser/monster/humanLeft/humanLeft.json'
        }, {
            key: 'fireAttack',
            imagePath: ['/images/phaser/fireAttack/fireAttack.png', '/images/phaser/fireAttack/fireAttack_normal.png'],
            jsonPath: '/images/phaser/fireAttack/fireAttack.json'
        }, {
            key: 'home',
            imagePath: ['/images/phaser/home/home.png', '/images/phaser/home/home_normal.png'],
            jsonPath: '/images/phaser/home/home.json'
        }, {
            key: 'gold',
            imagePath: ['/images/phaser/gold/gold.png', '/images/phaser/gold/gold_normal.png'],
            jsonPath: '/images/phaser/gold/gold.json'
        }, {
            key: 'fire',
            imagePath: ['/images/phaser/fire/fire.png', '/images/phaser/fire/fire_normal.png'],
            jsonPath: '/images/phaser/fire/fire.json'
        }], 'http://localhost:3001', this, (e) => {
            console.log(e);
        });
    }

    DEMON_HUMAN_MOVE_CREATED_FRAME_ANIMA() {
        new UtilsCreateFrameAnima([{
            key: 'demonMoveBottomAnima',
            frames: 'demonMoveBottom',
            frameRate: 8,
            repeat: -1
        },{
            key: 'demonMoveBottomLeftAnima',
            frames: 'demonMoveBottomLeft',
            frameRate: 8,
            repeat: -1
        },{
            key: 'demonMoveLeftAnima',
            frames: 'demonMoveLeft',
            frameRate: 8,
            repeat: -1
        },{
            key: 'demonMoveTopLefttAnima',
            frames: 'demonMoveTopLeft',
            frameRate: 8,
            repeat: -1
        },{
            key: 'demonMoveTopAnima',
            frames: 'demonMoveTop',
            frameRate: 8,
            repeat: -1
        },{
            key: 'demonMoveTopRightAnima',
            frames: 'demonMoveTopRight',
            frameRate: 8,
            repeat: -1
        },{
            key: 'demonMoveRightAnima',
            frames: 'demonMoveRight',
            frameRate: 8,
            repeat: -1
        },{
            key: 'demonMoveBottomRightAnima',
            frames: 'demonMoveBottomRight',
            frameRate: 8,
            repeat: -1
        },{
            key: 'demonAttackBottomAnima',
            frames: 'demonAttackBottom',
            frameRate: 8,
            repeat: 0
        },{
            key: 'demonAttackBottomLeftAnima',
            frames: 'demonAttackBottomLeft',
            frameRate: 8,
            repeat: 0
        },{
            key: 'demonAttackBottomRightAnima',
            frames: 'demonAttackBottomRight',
            frameRate: 8,
            repeat: 0
        },{
            key: 'demonAttackLeftAnima',
            frames: 'demonAttackLeft',
            frameRate: 8,
            repeat: 0
        },{
            key: 'demonAttackRightAnima',
            frames: 'demonAttackRight',
            frameRate: 8,
            repeat: 0
        },{
            key: 'demonAttackTopAnima',
            frames: 'demonAttackTop',
            frameRate: 8,
            repeat: 0
        },{
            key: 'demonAttackTopLeftAnima',
            frames: 'demonAttackTopLeft',
            frameRate: 8,
            repeat: 0
        },{
            key: 'demonAttackTopRightAnima',
            frames: 'demonAttackTopRight',
            frameRate: 8,
            repeat: 0
        },{
            key: 'humanTopAnima',
            frames: 'humanTop',
            frameRate: 8,
            repeat: -1
        },{
            key: 'humanRightAnima',
            frames: 'humanRight',
            frameRate: 8,
            repeat: -1
        },{
            key: 'humanBottomAnima',
            frames: 'humanBottom',
            frameRate: 8,
            repeat: -1
        },{
            key: 'humanLeftAnima',
            frames: 'humanLeft',
            frameRate: 8,
            repeat: -1
        },{
            key: 'fireAttackAnima',
            frames: 'fireAttack',
            frameRate: 8,
            repeat: -1
        },{
            key: 'homeAnima',
            frames: 'home',
            frameRate: 8,
            repeat: -1
        },{
            key: 'goldAnima',
            frames: 'gold',
            frameRate: 8,
            repeat: -1
        },{
            key: 'fireAnima',
            frames: 'fire',
            frameRate: 12,
            repeat: -1
        }], this);
    }

    IMAGE_LOAD() {
        new UtilsLoader('image', [{
            key: 'rockerTop',
            path: '/images/phaser/rockerImage/rockerTop.png'
        },
        {
            key: 'rockerMiddle',
            path: '/images/phaser/rockerImage/rockerMiddle.png'
        },
        {
            key: 'rockerBottom',
            path: '/images/phaser/rockerImage/rockerBottom.png'
        },
        {
            key: 'map',
            path: ['/images/phaser/map.png', '/images/phaser/map_normal.png']
        },
        {
            key: 'houseTopWorld',
            path: ['/images/phaser/houseWorldImage/houseTopWorld.png', '/images/phaser/houseWorldImage/houseTopWorld_normal.png']
        },{
            key: 'houseRightWorld',
            path: ['/images/phaser/houseWorldImage/houseRightWorld.png', '/images/phaser/houseWorldImage/houseRightWorld_normal.png']
        },{
            key: 'houseBottomWorld',
            path: ['/images/phaser/houseWorldImage/houseBottomWorld.png', '/images/phaser/houseWorldImage/houseBottomWorld_normal.png']
        },{
            key: 'houseLeftWorld',
            path: ['/images/phaser/houseWorldImage/houseLeftWorld.png', '/images/phaser/houseWorldImage/houseLeftWorld_normal.png']
        },{
            key: 'book',
            path: ['/images/phaser/book.png', '/images/phaser/book_normal.png']
        }], 'http://localhost:3001', this, (e) => {
            console.log(e);
        });
    }

    /**
     * @summary 绘画NPC攻击范围
     */
    HUMAN_DRAW_RANGE() {
        this.add.existing(new Graphical({
            path: false,
            style: {
                col: 0xff0000,
                alp: .8
            },
            rec: {
                x: this.humanNpc.x, 
                y: this.humanNpc.y,
                w: 200,
                h: 200
            },
            gen: {
                genKey: 'human-Range',
                w: 200,
                h: 200
            },
            vis: true,
            des: true
        }, this));

        new UtilsSprite([{
            key: 'humanRange',
            spriteKey: 'human-Range',
            sprXY: {
                x: this.humanNpc.x, 
                y: this.humanNpc.y
            }
        }], 'static', this);

        new UtilsDetection({
            type: '_overlap',
            key: 'demonPlay1',
            targetKey: 'humanRange'
        }, (e) => {
            // console.log(e);
            /**
             * @summary 范围视觉追踪
             */
            // new UtilsVisualTracking({
            //     type: 'monomer',
            //     npc: this.humanNpc,
            //     target: this.demonPlay1,
            //     speed: .2,
            //     anima: 'four',
            //     spriteKey: 'humanNpc'
            // }, this);

            /**
             * @summary 视觉追踪到天涯海角
             */
            this.humanNpcTrackDemonPlay1 = true;
        }, this);

    }

    /**
     * @summary 绘画book触发范围
     */
    BOOK_DRAW_RANGE() {
        this.add.existing(new Graphical({
            path: false,
            style: {
                col: 0xff0000,
                alp: .8
            },
            rec: {
                x: this.book1.x - 140, 
                y: this.book1.y,
                w: 20,
                h: 100
            },
            gen: {
                genKey: 'book-Range-left',
                w: 20,
                h: 100
            },
            vis: true,
            des: true
        }, this));

        this.add.existing(new Graphical({
            path: false,
            style: {
                col: 0xff0000,
                alp: .8
            },
            rec: {
                x: this.book1.x + 140, 
                y: this.book1.y,
                w: 20,
                h: 100
            },
            gen: {
                genKey: 'book-Range-right',
                w: 20,
                h: 100
            },
            vis: true,
            des: true
        }, this));

        new UtilsSprite([{
            key: 'bookRangeLeft',
            spriteKey: 'book-Range-left',
            sprXY: {
                x: this.book1.x - 140,
                y: this.book1.y,
            }
        },{
            key: 'bookRangeRight',
            spriteKey: 'book-Range-right',
            sprXY: {
                x: this.book1.x + 140,
                y: this.book1.y
            }
        }], 'static', this);

        new UtilsDetection({
            type: '_overlap',
            key: 'demonPlay1',
            targetKey: 'bookRangeLeft'
        }, (e) => {
            SaveSceneExampleQueue.getQueue().forEach(element => {
                if (element.SceneUiSkill) {
                    element.SceneUiSkill.task.setVisible(false);
                }
            });
        }, this);

        new UtilsDetection({
            type: '_overlap',
            key: 'demonPlay1',
            targetKey: 'bookRangeRight'
        }, (e) => {
            SaveSceneExampleQueue.getQueue().forEach(element => {
                if (element.SceneUiSkill) {
                    element.SceneUiSkill.task.setVisible(false);
                }
            });
        }, this);

        new UtilsDetection({
            type: '_collider',
            key: 'demonPlay1',
            targetKey: 'book1'
        }, (e) => {
            SaveSceneExampleQueue.getQueue().forEach(element => {
                if (element.SceneUiSkill) {
                    element.SceneUiSkill.task.setVisible(true);
                }
            });
        }, this);
    }

    /**
     * @summary 普通攻击工作流
     */
    NORMAL_ATTACK_WORKfLOW() {
        /**
         * @summary 创建图形生成精灵
         * @class 普通攻击容器
         */
        this.add.existing(new Graphical({
            path: false,
            style: {
                col: 0xff0000,
                alp: .8
            },
            rec: {
                x: 300,
                y: 300,
                w: 20,
                h: 20
            },
            gen: {
                genKey: 'fire-attack-over',
                w: 20,
                h: 20
            },
            vis: true,
            des: true
        }, this));

        new UtilsSprite([{
            key: 'fireAttackOver',
            spriteKey: 'fire-attack-over',
            sprXY: {
                x: 0,
                y: 0
            },
            ag: false,
            gy: -1,
            boun: -1,
            cwb: true
        }], '', this);

        /**
         * @summary 创建路径坐标生成绘画路径
         */
        let arr = [this.demonPlay1.x,this.demonPlay1.y,this.humanNpc.x,this.humanNpc.y];
        this.drawLine = this.add.existing(new Graphical({
            path: true
        }, this));
        this.creatLine = this.add.existing(new Line(arr, this.drawLine));

        /**
         * @summary 创建普通攻击精灵路径跟随
         */
        this.followXY = this.add.existing(new UtilsPathFollow({
            path: this.creatLine,
            scal: .2,
            x: this.demonPlay1.x,
            y: this.demonPlay1.y,
            key: 'fireAttack',
            playKey: 'fireAttackAnima',
            starFol: {
                dur: 1000,
                yoyo: false,
                rep: 0,
                rotOff: 0,
                rotPath: true
            }
        }, this));

        /**
         * @summary 普通攻击容器坐标
         */
        let fireAttackOver = setInterval(() => {
            this.fireAttackOver.x = this.followXY.getCenter().x;
            this.fireAttackOver.y = this.followXY.getCenter().y;
        });

         /**
         * @summary 创建图形生成精灵
         * @class 普通攻击走向终点容器
         */
          this.add.existing(new Graphical({
            path: false,
            style: {
                col: 0xff0000,
                alp: .8
            },
            rec: {
                x: this.humanNpc.x,
                y: this.humanNpc.y,
                w: 20,
                h: 20
            },
            gen: {
                genKey: 'fire-attack-end',
                w: 20,
                h: 20
            },
            vis: true,
            des: true
        }, this));

        new UtilsSprite([{
            key: 'fireAttackEnd',
            spriteKey: 'fire-attack-end',
            sprXY: {
                x: this.humanNpc.x,
                y: this.humanNpc.y
            },
            ag: false,
            gy: -1,
            boun: -1,
            cwb: true
        }], '', this);
        
        /**
         * @summary 监听普通攻击重叠目标
         */
         new UtilsDetection({
            type: '_overlap',
            key: 'fireAttackOver',
            targetKey: 'humanNpc'
        }, (e) => {
            this.humanNpcTrackDemonPlay1 = true;
            this.fireAttackData = { attack: .1 };
            this.ON_NPC_DESTROY();
            clearInterval(fireAttackOver);
            this.fireAttackOver.destroy(true, true);
            this.followXY.destroy(true, true);
            SaveSceneExampleQueue.getQueue().forEach(element => {
                if (element.SceneUiSkill) {
                    element.SceneUiSkill.attCD.setVisible(false);
                    element.SceneUiSkill.att.setVisible(true);
                }
            });
        }, this);

         /**
         * @summary 监听普通攻击重叠终点
         */
          new UtilsDetection({
            type: '_overlap',
            key: 'fireAttackEnd',
            targetKey: 'fireAttackOver'
        }, (e) => {
            clearInterval(fireAttackOver);
            this.fireAttackOver.destroy(true, true);
            this.followXY.destroy(true, true);
            this.fireAttackEnd.destroy(true, true);
            SaveSceneExampleQueue.getQueue().forEach(element => {
                if (element.SceneUiSkill) {
                    element.SceneUiSkill.attCD.setVisible(false);
                    element.SceneUiSkill.att.setVisible(true);
                }
            });
        }, this);
    }

    /**
     * @summary 监听NPC血量
     */
    ON_NPC_DESTROY() {
        let resBlood = this.humanNpc.data.list.blood -= this.fireAttackData.attack;
        this.npcBloodBar.setProgress(resBlood, true);
        console.log('npc剩余血量:', `${(resBlood * 100).toFixed(0)}`);
        if(`${(resBlood * 100).toFixed(0)}` == 0) {
            this.follow.remove(this.npcBloodBar);
            this.follow.remove(this.humanNpc);
            this.humanNpcTrackDemonPlay1 = false;
            this.humanNpc.destroy(true, true);
            this.humanRange.destroy(true, true);
            setTimeout(() => {
                this.npcBloodBar.destroy(true, true);
            },500);

            /**
             * @summary 装备掉落
             */
            new UtilsItemDrops({
                key: 'gold1',
                tarKey: 'humanNpc',
                open: {
                    overlap: true,
                    overTarKey: 'demonPlay1'
                },
                grap: {
                    genKey: 'gold-base',
                    genSpiritKey: 'goldBase'
                },
                boun: .6,
                off: {
                    y: 120
                }
            }, this);
        }
    }

    /**
     * @summary player 聊天框
     */
    SPEAK_DOM() {
        this.msgDom = this.add.dom(100, 100, document.getElementById('msg'), "opacity: 1;")
        .setVisible(false);

        new UtilsBindingTarget([{
            key: 'msgDom',
            targetKey: 'demonPlay1',
            off: {
                x: -30,
                y: -60
            },
            rot: false,
            rotFF: false
        }], this);
    }

}